<template>
    <div class="body">
        <topNav @reload-data="reloadData"></topNav>
        <div class="header">
          <div class="title">Wchime商城</div>
          <div class="search">
            <input class="txt" type="text" v-model="searchInfo"/>
            <input class="btn" type="button" value="搜索" @click="btnClick"/>
          </div>
        </div>

      <div class="content">
        <div class="m1Name"><span>主题市场</span></div>
        <div class="module1">
          
          <div class="classify">
            <classifyNav v-for="item,index in classifyList" :key="index" :names="item"></classifyNav>
          </div>
          <div><slideShow></slideShow></div>
          <div class="user">
            <div class="up" @click="userClick">
              <div class="userheader"><img :src="userHost?imgUrl(userHost):require('../../assets/user/user.png')" alt=""></div>
              <div class="username">{{userInfo ? userInfo.name : 'Hi, 你好'}}</div>
            </div>
            <div class="center"><img src="../../assets/user/u.png" alt=""></div>
            <div class="gg"><b>公告：</b>公告新鲜事儿都在这里～</div>
            <div class="botton">
              <div>
                <img src="../../assets/user/shoucang.png"/>
                <div>收藏</div>
              </div>
              <div>
                <img src="../../assets/user/shangping.png"/>
                <div>买过的店铺</div>
              </div>
              <div>
                <img src="../../assets/user/dianpu.png"/>
                <div>收藏的店铺</div>
              </div>
              <div>
                <img src="../../assets/user/zuji.png"/>
                <div>足迹</div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="m2Name"><span>限时抢购</span></div>
        <div class="module2">
          <div v-for="(item, index) in models2Data">
        
            <rushBuy class="rushbuy" :goodsData="item"></rushBuy>
          </div>
          
          
        </div>
        <div class="m3Name"><span>精选好货</span></div>
        <div class="module3">
          <div v-for="(item, index) in models3Data">
            <goodsBox class="goods" :goodsData="item"></goodsBox>
          </div>
         
        </div>
        <div class="m4Name"><span>猜你喜欢</span></div>
        <div class="module4">
          <div v-for="(item, index) in models4Data">
            <goodsBox class="goods" :goodsData="item"></goodsBox>
          </div>
        </div>

      </div>

      <div class="foot">
        <div class="tips" style="text-align: center; margin-top: 10px;"><a style="text-decoration:none;" href="https://beian.miit.gov.cn/">桂ICP备2022009991号-1</a></div>
      </div>


    </div>
  </template>
  
  <script>
  import topNav from "@/components/topNav/topNav.vue"
  import classifyNav from "@/components/classifyNav/classifyNav.vue"
  import slideShow from "@/components/slideShow/slideShow.vue"
  import rushBuy from "@/components/rushBuy/rushBuy.vue"
  import goodsBox from "@/components/goodsBox/goodsBox.vue"

  import {getHomeGoods, getRushGoods, UserInfo} from "@/api/dataReq"
  import { getUserInfo } from '@/utils/auth'

  export default {
    name: 'Home',
    components: {topNav,classifyNav, slideShow, rushBuy, goodsBox},
    data() {
      return {
        classifyList:[
          [{name:'女装', id:1}, {name:'内衣', id:2}],
          [{name:'男装', id:3}, {name:'运动户外', id:4}],
          [{name:'女鞋', id:5}, {name:'男鞋', id:6}, {name:'箱包', id:7}],
          [{name:'美妆', id:8}, {name:'个人护理', id:9}],
          [{name:'腕表', id:10}, {name:'眼镜', id:11}, {name:'珠宝饰品', id:12}],
          [{name:'手机', id:13}, {name:'数码', id:14}, {name:'电脑办公', id:15}],
          [{name:'母婴玩具', id:16}],
          [{name:'零食', id:17}, {name:'茶酒', id:18}, {name:'进口食品', id:19}],
          [{name:'生鲜水果', id:20}],
          [{name:'大家电', id:21}, {name:'生活电器', id:22}],
          [{name:'家具', id:23}, {name:'灯具', id:24}, {name:'卫浴', id:25}],
          [{name:'汽车', id:26}, {name:'配件', id:27}, {name:'用品', id:28}],
         
        ],
        models3Data:[],
        models4Data:[],
        models2Data:[],
        searchInfo:null,
        userInfo:null,
        userHost:null,

      }
    },
    computed: {},
    created() {
      this.getModels2()
      this.getModels3()
      this.getModels4()

      this.startGetUserInfo()
      console.log(this.userInfo)
    },
    methods: {
      reloadData(){
        location.reload()
      },
      getModels2(){
        var reqData = {
        home:1,
        number:4
      }
      getRushGoods(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.models2Data = response.data
         
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      getModels3(){
        var reqData = {
        home:1,
        number:12
      }
      getHomeGoods(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.models3Data = response.data
         
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      getModels4(){
        var reqData = {
        home:1,
        number:12
      }
      getHomeGoods(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.models4Data = response.data
         
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      btnClick(){
        if(this.searchInfo){
          let routeData = this.$router.resolve({ path:`/goods?search=${this.searchInfo}` }); 
          window.open(routeData.href, '_blank');
        }
        
      },
      startGetUserInfo(){
        // var user = getUserInfo()
        // console.log(user)
        // if (user) {
        //   this.userInfo = JSON.parse(user)
        //   this.userHost = this.userInfo.headshot
        // }
        var user = getUserInfo()
        if(user){
          var reqData  ={}
        UserInfo(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.userInfo = response.data[0]
           this.userHost = response.data[0].headshot
          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
        }
        
     
        

        
      },
      userClick(){
        if(this.userInfo){
          // this.$router.push({ path: '/usercenter'})
          let routeData = this.$router.resolve({ path:`/usercenter` }); 
          window.open(routeData.href, '_blank');
        }
        else{
          this.$router.push({ path: '/login'})
        }
      },
      imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .body{
    background: linear-gradient(rgb(191, 227, 241), rgb(213,213,213));
    // height: 600px;
    

  }
  .header{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 40px;
    .title{
      text-align: center;
      font-size: 2rem;
    /* 文字间距 */
    letter-spacing: 5px;
    color: white;
    /* 禁止选中 */
    user-select: none;
    /* 文字阴影 */
    text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
    }
    .search{
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgb(131, 199, 225);
      border-radius: 36px;
      background-color: #FFFFFF;
      margin-left: 50px;
      
      .txt{
        width: 500px;
        height: 36px;
        border:none;
        // border-radius:36px 0 0 36px;
        // padding: 10px 20px;
        margin-left: 20px;
        outline: none;
        
      }
      .btn{
        width: 80px;
        height: 39px;
        position: relative;
        border:none;
        border-radius:36px;
        background-color: rgb(131, 199, 225);
        color: #FFFFFF;
        font-size: 16px;
        
      }
    }
  }
  .content{
    width: 1190px;
    // height: 1000px;
    // border: red 1px solid;
    // align-content: center;
    margin: auto;
    // margin-bottom: 60px;
    // padding-bottom: 60px;
    background-color: #FFFFFF;
    border-radius:20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-content: flex-start;
    // display: flex;
    // justify-content: center;
    // align-items: center;

  }
  .foot{
    width: 100%;
    height: 60px;
  }
  .module1{
    width: 100%;
    display: flex;
  }
  .m1Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 10px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(131, 199, 225);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .classify{
    width: 220px;
    // height: 500px;
    // border: yellow 1px solid;
  }
  .user{
    height: 420px;
    width: 300px;
    // border: yellow 1px solid;
    margin: 0 auto;
    background-color: rgb(243,243,243);
    border-radius:20px;

  }
  .up{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    
  }
  .userheader{
    width: 100px;
    height: 100px;
    background-color: rgb(213,213,213);
    border-radius:100px;
    overflow: hidden;
    margin: 15px 0;
    cursor:pointer;
    img{
      width: 100px;
      height: 100px;
      
    }
  }
  .username{
    cursor:pointer;
  }
  .center{
    img{
      width: 95%;
      height: 100px;
    }
  }
  .gg{
    margin-top: 20px;
    font-size: 0.8rem;
    justify-content:flex-start;
  }
  .botton{
    display: flex;
    
    justify-content: center;
    align-items: center;
    // margin-top: 30px auto;
    margin-top: 30px;
    div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.5rem;
      margin: auto;
      cursor:pointer;
      
      img{
        width: 40px;
      height: 40px;
      }
    }
    div:hover{
                    color: rgb(131, 199, 225);
                }
  }
  .m2Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(64,158,255);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module2{
    display: flex;
    justify-content: flex-start;
      align-items: center;
      flex-wrap:wrap;
      // margin: auto;
      margin-top: 20px;
      .rushbuy{
        margin: 2px 2.6px;
      }
  }
  .m3Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(180, 183, 33);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module3{
    width: 100%;
    display: flex;
    flex: 6;
    align-items: center;
    flex-wrap:wrap;
    margin: auto;
    margin-top: 20px;
    .goods{
      margin: 2px 3px;
    }
      
  }

  .m4Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(208, 84, 11);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module4{
    width: 100%;
    display: flex;
    flex: 6;
    align-items: center;
    flex-wrap:wrap;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    .goods{
      margin: 2px 3px;
    }
      
  }
    
</style>